<template>
  <div class="chart">
    <temp01 />
    <winDir />
    <heatRed />
    <heatBlue />
  </div>
</template>
<script>
  import temp01 from './temp01.vue';
  import winDir from './winDir.vue';
  import heatRed from './heatRed.vue';
  import heatBlue from './heatBlue.vue';
  export default {
    components: { temp01, winDir, heatRed, heatBlue },
    data () {
      return {
        max: 600, // 最大量程
        min: 0, // 最大量程
        val: 520,
        unit: 'cm'
      };
    },
    computed: {
      // 高度94， 总共15格计算出每一个格子px
      kd () {
        return `${(this.val / (this.max - this.min)) * 100}%`;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .chart {
    padding: 20px;
    display: flex;
  }
</style>